<template>
  <div>
    <div class="PrivacySettings">
      <h4>隐私设置</h4>
      <hr />
      <ul>
        <li>
          <h5>屏蔽设置</h5>
          <p>屏蔽后，对方将不可在您的内容下进行评论</p>
          <span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="30"
              height="30"
              fill="white"
              class="bi bi-toggle-off"
              viewBox="0 0 16 16"
            >
              <path
                d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"
              />
            </svg>
          </span>
          <span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="30"
              height="30"
              fill="white"
              class="bi bi-toggle-on"
              viewBox="0 0 16 16"
            >
              <path
                d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"
              />
            </svg>
          </span>
        </li>
        <li>
          <h5>屏蔽设置</h5>
          <p>屏蔽后，对方将不可在您的内容下进行评论</p>
          <span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="30"
              height="30"
              fill="white"
              class="bi bi-toggle-off"
              viewBox="0 0 16 16"
            >
              <path
                d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"
              />
            </svg>
          </span>
          <span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="30"
              height="30"
              fill="white"
              class="bi bi-toggle-on"
              viewBox="0 0 16 16"
            >
              <path
                d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"
              />
            </svg>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "PrivacySettings",
};
</script>

<style lang="less" scoped>
.PrivacySettings {
  padding-bottom: 20px;
  ul {
    margin: 0px;
    li {
      margin: 0px 20px;
      position: relative;
      border-bottom: 1px solid #fff;
      width: auto;
      height: 80px;
      h5 {
        margin: 20px 0px;
      }
      span {
        position: absolute;
        right: 100px;
        top: 35px;
      }
    }
  }
}
</style>
